<!-- 
  标准表格v1
  能力：
  展示列、操作列、选择框
  输入：
  columns:数据列配置
  data:数据
  operations:操作列配置
  enableSelection:是否显示多选列
 -->

<template>
  <div class="table">
    <el-table :data="data" @selection-change="handleSelectionChange">
      <el-table-column v-if="enableSelection" type="selection" width="55" fixed="left" />
      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.columnLabel" :prop="item.columnProps"
        :fixed="item.columnFixed" />
      <el-table-column v-if="operations">
        <template #default="scope">
          <template v-for="(item, index) in operations" :key="index">
            <el-popconfirm v-if="item.needConfirm" title="确认操作？" confirm-button-text="确认" cancel-button-text="取消"
              @confirm="item.buttonCallback(scope.row)">
              <template #reference>
                <el-button :disabled="item.disabled !== undefined && item.disabled(scope.row)" size="small"
                  :type="item.buttonType" plain>{{ item.buttonText }}</el-button>
              </template>
            </el-popconfirm>
            <el-button :disabled="item.disabled !== undefined && item.disabled(scope.row)" v-else size="small"
              :type="item.buttonType" @click="item.buttonCallback(scope.row)" plain>
              {{ item.buttonText }}
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts" generic="T">
import { ref, reactive, type Ref } from 'vue';

const props = defineProps({
  columns: Array<TableConfigItem>,
  data: Array<T>,
  operations: Array<OperationItem<T>>,
  enableSelection: Boolean
})

const itemSelected = ref<T[]>([] as Array<T>) as Ref<T[]>;

const handleSelectionChange = (val: Array<T>) => {
  itemSelected.value = val;
}

defineExpose({
  itemSelected,
})

</script>

<style scoped>
.table {
  width: 100%;
}
</style>
